<template>
	<view class="popup-overlay" v-if="show">
		<view class="popup" @click.stop>
			<view class="coupon-settings">
				<view class="close-button" @click="close">×</view>
				<view class="input-group">
					<text class="label">优惠券名称：</text>
					<input class="input-field" type="text" v-model="coupon.name" placeholder="输入优惠券名称" />
				</view>
				<view class="select-group">
					<text class="label">优惠券类型：</text>
					<picker ref="picker" mode="selector" :range="Object.keys(types)" @change="onTypeChange">
						<view class="picker-custom">
							<view class="picker-selected">{{ Object.keys(types)[typesIndex] }}</view>
							<view class="picker-arrow"></view>
						</view>
					</picker>

				</view>
				<view class="input-group">
					<text class="label">优惠券面额：</text>
					<input class="input-field" type="number" v-model="coupon.money" placeholder="输入优惠券面额" />
				</view>
				<view class="input-group">
					<text class="label">输入满多少元可以使用：</text>
					<input class="input-field" type="number" v-model="coupon.atleast" placeholder="输入最低使用金额" />
				</view>
				<view class="select-group">
					<text class="label">允许直接领取：</text>
					<picker mode="selector" :range="['是', '否']" @change="onDirectChange">
						<view class="picker-custom">
							<view class="picker-selected">{{ coupon.isshow }}</view>
							<view class="picker-arrow"></view>
						</view>
					</picker>
				</view>
				<view class="select-group">
					<text class="label">过期类型：</text>
					<picker mode="selector" :range="validitytypes" @change="onExpiryTypeChange">
						<view class="picker-custom">
							<view class="picker-selected">{{ coupon.validitytype }}</view>
							<view class="picker-arrow"></view>
						</view>
					</picker>
				</view>
				<view class="input-group" v-if="coupon.validitytype !== '长期有效'">
					<text class="label">使用结束时间：</text>
					<picker mode="date" @change="onDateChange">
						<view class="picker-custom">
							<view class="picker-selected">{{ coupon.endusetime }}</view>
							<view class="picker-arrow"></view>
						</view>
					</picker>
				</view>
				<button class="confirm-button" @click="confirmSettings">确认添加</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: Boolean,
		},
		data() {
			return {
				coupon: {
					name: '',
					money: 100,
					atleast: 200,
					type: 'reward',
					isshow: '否',
					validitytype: '长期',
					endusetime: '' // Default to empty string
				},
				types: {
					'满减': 'reward',
					'折扣': 'discount'
				},
				typesIndex: 'reward', // 默认类型
				validitytypes: ['固定时间范围过期', '领取之日起', '长期有效'],

			};
		},
		created() {

			const today = new Date();
			today.setDate(today.getDate() + 10);
			this.coupon.endusetime = today.toISOString().split('T')[0];

			this.typesIndex = 0; // 设置默认索引
			this.coupon.type = Object.values(this.types)[this.typesIndex]; // 默认选中第一个类型
		},
		methods: {
			close() {
				console.log('关闭弹窗');
				// 这里可以触发父组件事件，关闭弹窗
				this.$emit('close');
			},
			onTypeChange(e) {
				// 更新类型索引和对应的优惠券类型
				const index = e.detail.value;
				this.typesIndex = index; // 选择器返回的索引值
				this.coupon.type = Object.values(this.types)[index]; // 从 types 中获取对应类型
			},

			onDirectChange(e) {
				this.coupon.isshow = e.detail.value === 0 ? '是' : '否';
			},
			onExpiryTypeChange(e) {
				this.coupon.validitytype = this.validitytypes[e.detail.value];
				if (this.coupon.validitytype === '长期有效') {
					this.coupon.endusetime = ''; // 清空结束时间
				}
			},
			onDateChange(e) {
				this.coupon.endusetime = e.detail.value;
			},
			confirmSettings() {
				if (!this.coupon.name || this.coupon.money <= 0) {
					uni.showToast({
						title: '请完整填写优惠券信息',
						icon: 'none'
					});
					return;
				}

				// 如果是固定时间范围过期，校验 endusetime 是否填写
				if (this.coupon.validitytype === '固定时间范围过期' && !this.coupon.endusetime) {
					uni.showToast({
						title: '请选择使用结束时间',
						icon: 'none'
					});
					return;
				}

				this.addData(); // 提交数据
				console.log('优惠券设置:', this.coupon);
			},

			addData() {

				this.$xyfun.storeId().then((store_id) => {

					this.coupon.store_id = store_id;

					this.$api.post({
						url: '/Coupon/addCoupon',
						loadingTip: '加载中...',
						data: {
							...this.coupon
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.isLoading = false;
							// this.cards = res.data;
						}
					});
				})

			},
		}
	};
</script>

<style scoped>
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: auto;
	}

	.popup {
		background-color: #fff;
		width: 80%;
		border-radius: 10px;
		padding: 20px;
	}

	.coupon-settings {
		padding: 20px;
		background-color: #fff;
	}

	.close-button {
		position: absolute;
		top: 10px;
		right: 30px;
		width: 24px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		background-color: #000;
		color: #fff;
		border-radius: 50%;
		font-size: 18px;
		cursor: pointer;
	}

	.close-button:hover {
		background-color: #d32f2f;
	}

	.input-group,
	.select-group {
		margin-bottom: 15px;
	}

	.label {
		display: block;
		margin-bottom: 5px;
		color: #333;
	}

	.input-field {
		width: 100%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.picker-custom {

		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border: 1px solid #ccc;
		/* 边框 */
		border-radius: 5px;
		/* 圆角 */
		background-color: #F5F5F5;
		/* 背景颜色 */
	}

	.picker-selected {
		flex: 1;
		color: #333;
		/* 文字色 */
	}

	.picker-arrow {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #000;
		margin-left: 10px;
	}

	.confirm-button {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		/* padding: 10px; */
		background-color: #65C61D;
		color: #fff;
		border: none;
		border-radius: 14rpx;
		font-size: 16px;
		cursor: pointer;
	}

	.confirm-button:hover {
		background-color: #45a049;
	}
</style>